/*
 * author: downey
 * version: 1.0.0
 * git: http://git.kekuming.xin/downey/downey-canvas-charts.git
 */
import Base from './base'

export default class Radar extends Base {

  /* 构造函数 */
  constructor(option = {}) {
    const parameter = {
      data: [40, 0, 80, 160, 50],
      indicator: [
        {
          text: '男性',
          textColor: 'rgba(254, 252, 242, 1)',
          fontSize: 14
        },
        {
          text: '女性',
          textColor: 'rgba(254, 252, 242, 1)',
        },
        {
          text: '外星人',
          textColor: 'red',
        }
      ],
      radius: 160,
      startAngle: 0,
      splitNumber: 8,
      name: {
        formatter: '【{value}】',
        textStyle: {
          color: '#72ACD1'
        }
      },
      splitArea: {
        areaStyle: {
          show: true,
          color: [
            'red',
            [
              {offset: 1, color: 'rgba(0, 0, 0, 1)'},
              {offset: 0, color: 'rgba(255, 255, 255, 1)'},
            ],
            'blue',
            'rgba(114, 172, 209, 0)',
            '#000',
            'transparent',
          ],
          shadowColor: 'rgba(0, 0, 0, .6)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      dataLine: {
        lineStyle: {
          show: true,
          width: 2,
          color: 'rgba(0, 220, 242, .8)'
        },
        dotStyle: {
          show: true,
          radius: 3,
          color: 'rgba(0, 220, 242, .8)'
        },
        fillStyle: {
          show: true,
          color: 'rgba(53, 195, 193, .5)'
        }
      },
      specialLine: {
        lineStyle: {
          width: 2,
          color: 'rgba(33, 150, 219, .7)'
        },
        fillStyle: {
          width: 10,
          color: 'rgba(53, 195, 193, .3)'
        }
      },
      splitLine: {
        lineStyle: {
          show: true,
          lineWidth: 1,
          color: 'rgba(37,175,255,.7)',
        },
        textStyle: {
          show: true,
          color: 'rgba(0, 220, 242, .4)',
          fontSize: 12
        }
      },
    };
    super(option, parameter);
  }

  // 重写绘制逻辑
  drawLogic() {

    this.drawRadar();

    this.drawSpecialRadar();

    this.drawArea();

  }

  // 重写计算保存全局变量
  getGlobal() {
    // 计算分割间距
    this.maxData = Math.max(...this.data);
    this.splitData = this.maxData / this.splitNumber;
    this.splitSpace = this.radius / this.splitNumber;
    this.splitAngle = 360 / this.data.length;
    // console.log(this.maxData, this.splitData, this.splitSpace, this.splitAngle);
    return this;
  }

  // 绘制背景雷达环
  drawRadar() {
    this.ctx.shadowBlur = this.splitArea.areaStyle.shadowBlur;
    this.ctx.shadowColor = this.splitArea.areaStyle.shadowColor;
    for (let i = this.splitNumber; i >= 0; i--) {
      let bgColor = this.getTypeColor(this.splitArea.areaStyle.color, this.splitNumber - i);
      this.ctx.beginPath();
      this.ctx.fillStyle = this.getColor(bgColor, [0, 0, this.splitSpace * (i === 0 ? 0 : i - 1), 0, 0, this.splitSpace * i]);
      // this.ctx.save();
      this.ctx.arc(0, 0, this.splitSpace * i, 0, Math.PI * 2);
      this.ctx.arc(0, 0, this.splitSpace * (i === 0 ? 0 : i - 1), 0, Math.PI * 2, true);
      // this.ctx.clip();
      // this.ctx.restore();
      this.ctx.fill();

      // 反向圆stroke会有封闭线 改用重回绘制边线
      if (this.splitLine.lineStyle.show) {
        this.ctx.beginPath();
        this.ctx.strokeStyle = this.splitLine.lineStyle.color;
        this.ctx.lineWidth = this.splitLine.lineStyle.lineWidth;
        this.ctx.arc(0, 0, this.splitSpace * i, 0, Math.PI * 2);
        this.ctx.stroke();
        this.ctx.closePath();
      }

      if (this.splitLine.textStyle.show) {
        let {color, textAlign, fontSize} = {...this.splitLine.textStyle} || {};
        fontSize = fontSize || 16;
        textAlign = textAlign || 'center';
        this.setFont(color, textAlign, fontSize);
        this.ctx.fillText(this.splitData * i, 0, -this.splitSpace * i + fontSize / 2);
        this.ctx.closePath();
      }
    }
  }

  // 装饰轴雷达环
  drawSpecialRadar() {
    let {color, width} = {...this.specialLine.lineStyle} || {};

    // 额外一圈装饰
    this.ctx.beginPath();
    this.ctx.lineWidth = width || 2;
    this.ctx.strokeStyle = this.getColor(color);
    this.ctx.arc(0, 0, this.splitSpace * (this.splitNumber + 1) + 5, 0, Math.PI * 2);
    this.ctx.stroke();
    this.ctx.closePath();

    let fillWidth = this.specialLine.fillStyle.width || 10;
    this.ctx.lineWidth = fillWidth;
    this.ctx.strokeStyle = this.getColor(this.specialLine.fillStyle.color);

    this.ctx.beginPath();
    this.ctx.arc(0, 0, this.splitSpace * (this.splitNumber) + fillWidth / 2, Math.PI / 180 * (-90), Math.PI / 180 * (-90 + 70));
    this.ctx.stroke();
    this.ctx.closePath();

    this.ctx.beginPath();
    this.ctx.arc(0, 0, this.splitSpace * (this.splitNumber) + fillWidth / 2, Math.PI / 180 * (-90 + 180), Math.PI / 180 * (-90 + 70 + 180));
    this.ctx.stroke();
    this.ctx.closePath();
  }

  // 绘制占地面积
  drawArea() {

    this.ctx.beginPath();

    // 公式测试
    // v/maxData = x/this.radius
    // this.ctx.beginPath();
    // let len = -(20 + 3), angle = 90;
    // let x = Math.ceil(Math.sin(Math.PI / 180 * angle) * -len);
    // let y = Math.ceil(Math.cos(Math.PI / 180 * angle) * len);
    // console.log('x,y', x, y);
    // this.ctx.arc(x, y, 3, 0, Math.PI * 2);
    // this.ctx.stroke();
    // this.ctx.closePath();

    this.data.forEach((v, k) => {
      // 计算坐标
      this.ctx.beginPath();
      let len = -v / this.maxData * this.radius, angle = this.splitAngle * k + this.startAngle;
      let x = Math.ceil(Math.sin(Math.PI / 180 * angle) * -len);
      let y = Math.ceil(Math.cos(Math.PI / 180 * angle) * len);
      // console.log('x,y', x, y);
      this.points.push({x, y});

      // dot
      if (this.dataLine.dotStyle.show) {
        let {color, width, radius} = {...this.dataLine.dotStyle} || {};
        radius = radius || 3;
        this.ctx.lineWidth = width || 2;
        this.ctx.strokeStyle = this.getColor(color || undefined);
        this.ctx.arc(x, y, radius, 0, Math.PI * 2);
        this.ctx.stroke();
      }

      // text
      let {text, textColor, fontSize} = {...this.indicator[k]} || {};
      fontSize = fontSize || 16;
      text = text || '';
      let q = this.getQuadrant(x, y);
      let f = this.ctx.measureText(text);
      this.setFont(textColor, 'center', fontSize);
      if (q === 1) {
        this.ctx.fillText(text, x + f.width / 2 + fontSize / 2, y - fontSize / 2);
      } else if (q === 2 || q === 0) {
        this.ctx.fillText(text, x + f.width / 2 + fontSize / 2, y + fontSize / 2);
      } else if (q === 3) {
        this.ctx.fillText(text, x - f.width / 2 - fontSize / 2, y + fontSize);
      } else if (q === 4) {
        this.ctx.fillText(text, x - f.width / 2 - fontSize / 2, y - fontSize / 2);
      }
      this.ctx.closePath();

      // dot 旋转坐标 =>但是得不到坐标点
      // this.ctx.beginPath();
      // this.ctx.save();
      // this.ctx.rotate(Math.PI / 180 * this.splitAngle * k);
      // this.ctx.arc(0, -v / this.maxData * this.radius + 3, 3, 0, Math.PI * 2);
      //
      // this.ctx.restore();
      // this.ctx.stroke();
      // this.ctx.closePath();
      // path 旋转坐标
      // this.ctx.save();
      // this.ctx.rotate(Math.PI / 180 * this.splitAngle * k);
      // if (k === 0) {
      //   this.ctx.moveTo(0, -v / this.maxData * this.radius);
      // } else {
      //   this.ctx.lineTo(0, -v / this.maxData * this.radius);
      // }
      // this.ctx.restore();
    });

    if (this.dataLine.lineStyle.show) {
      const {color, width, join} = {...this.dataLine.lineStyle} || {};
      this.ctx.lineWidth = width || 2;
      this.ctx.strokeStyle = this.getColor(color || undefined);
      this.ctx.lineJoin = join || 'round';

      this.ctx.beginPath();
      this.points.forEach((v, k) => {
        (k === 0) ? this.ctx.moveTo(v.x, v.y) : this.ctx.lineTo(v.x, v.y);
      });
      this.ctx.closePath();
      this.ctx.stroke();
    }

    if (this.dataLine.fillStyle.show) {
      const {color} = {...this.dataLine.fillStyle} || {};
      this.ctx.fillStyle = this.getColor(color);
      this.ctx.fill();
    }

  }

  // TODO hover数据

}
